div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
	.modal-dialog(role="document")
		.modal-content(
			event-tracking="form-submitted-groups-modal-open"
			event-tracking-mb="true"
			event-tracking-trigger="load"
		)
			.modal-header
				button.close(
					type="button"
					data-dismiss="modal"
					aria-label=translate("close")
				)
					span(aria-hidden="true") &times;
				h2 Customize your group subscription
				h3 Save 30% or more
			.modal-body.plans.group-subscription-modal
				.container-fluid
					.row
						.col-md-6.text-center
							.circle.circle-lg
								span(data-ol-group-plan-display-price) ...
								span.small / year
								br
								span.circle-subtext(data-ol-group-plan-price-per-user) ...
							ul.list-unstyled
								li Each user will have access to:
								li &nbsp;
								li(
									hidden=(groupPlanModalDefaults.plan_code !== 'collaborator')
									data-ol-group-plan-plan-code='collaborator'
								)
									strong #{translate("collabs_per_proj", {collabcount:10})}
								li(
									hidden=(groupPlanModalDefaults.plan_code !== 'professional')
									data-ol-group-plan-plan-code='professional'
								)
									strong #{translate("unlimited_collabs")}
								+features_premium
						.col-md-6
							form.form(data-ol-group-plan-form)
								.form-group
									label(for='plan_code')
										| Plan
									for plan_code in groupPlanModalOptions.plan_codes
										label.group-plan-option
											input(
												type="radio"
												name="plan_code"
												checked=(plan_code.code === "collaborator")
												value=plan_code.code
												data-ol-group-plan-code=plan_code.code
											)
											span #{plan_code.display}
								.form-group
									label(for='size')
										| Number of users
									select.form-control(
										id="size"
										event-tracking="groups-modal-group-size"
										event-tracking-mb="true"
										event-tracking-trigger="click"
										event-tracking-element="select"
									)
										for size in groupPlanModalOptions.sizes
											option(
												value=size
												selected=(size === groupPlanModalDefaults.size)
											) #{size}
								.form-group(data-ol-group-plan-form-currency)
									label(for='currency')
										| Currency
									select.form-control(id="currency")
										for currency in groupPlanModalOptions.currencies
											option(
												value=currency.code
												selected=(currency.code === groupPlanModalDefaults.currency)
											) #{currency.display}
								.form-group
									label(for='usage')
										| Overleaf offers a 40% educational discount for groups of 10 or more.
								label.group-plan-option
									input(
										id="usage"
										type="checkbox"
										autocomplete="off"
										event-tracking="groups-modal-edu-discount"
										event-tracking-mb="true"
										event-tracking-trigger="click"
										event-tracking-element="checkbox"
									)
									span This license is for educational purposes (applies to students or faculty using Overleaf for teaching)

					.row
						.col-md-12.text-center
							.educational-discount-badge
								div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
									p.applied(hidden=true data-ol-group-plan-educational-discount-applied)
										| 40% educational discount applied!
									p.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
										| The educational discount is available for groups of 10 or more
			.modal-footer
				.text-center
					button.btn.btn-primary.btn-lg(
						data-ol-purchase-group-plan
						event-tracking="form-submitted-groups-modal-purchase-click"
						event-tracking-mb="true"
						event-tracking-trigger="click"
						) Purchase Now
					hr.thin
					a(
						href
						data-ol-open-contact-form-for-more-than-50-licenses
					) Need more than 50 licenses? Please get in touch

